<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_页面全屏遮罩层</title>
  <style>
    .mask {
      /*width: 400px;*/
      /*height: 300px;*/
      background-color: rgba(0,0,0,0.3);
      position: fixed;
      /*width: 100vw;*/
      /*height: 100vh;*/
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit modi molestiae necessitatibus obcaecati odit
    saepe veritatis! Doloremque, labore, ullam. Deserunt laboriosam minima omnis quis quo reiciendis repellat
    repudiandae sed tempore?
  </div>
  <div>Ipsam magnam quo sapiente. Atque, in, repellendus! A aliquid assumenda aut blanditiis cumque cupiditate deserunt
    doloremque, excepturi facilis in ipsum laudantium necessitatibus provident sunt totam voluptate voluptatibus!
    Blanditiis, exercitationem, quod!
  </div>
  <div>Consectetur deserunt exercitationem numquam suscipit vel voluptates. Asperiores consequuntur corporis, cupiditate
    doloremque ipsum obcaecati optio rem tenetur voluptatibus! Asperiores beatae blanditiis fugiat magni maiores nisi
    possimus praesentium quis voluptas voluptatibus.
  </div>
  <div>Ad asperiores aspernatur deleniti doloremque eos esse excepturi illo libero, nisi nobis pariatur quae quibusdam
    quisquam similique temporibus. Assumenda consequuntur dolor doloremque eveniet illo ipsam mollitia quia quos
    repudiandae sequi?
  </div>
  <div>Architecto consequuntur culpa deleniti doloribus dolorum excepturi exercitationem expedita necessitatibus officia
    quae. Ab aliquam asperiores culpa delectus facere inventore iusto minus molestias nisi odit, quod repellat
    repudiandae rerum velit veritatis?
  </div>
  <div>A accusamus, aliquam blanditiis debitis dolore expedita explicabo natus neque, nisi, numquam rerum tenetur
    veritatis. Beatae cum ea iste nisi pariatur quidem reiciendis similique sint veniam voluptatum! Cupiditate itaque,
    modi?
  </div>
  <div>Aliquid aperiam asperiores consectetur cumque delectus ex, fugiat nesciunt nobis odit quisquam repellendus saepe
    veniam, voluptatum? Ad adipisci consectetur distinctio, iste laudantium mollitia, odit omnis quasi quibusdam,
    repellat vero voluptatibus!
  </div>
  <div>Consequatur dolores esse facere fugiat fugit neque nihil rem, sed. Atque aut deleniti doloribus dolorum
    explicabo, fugit magnam nam natus nulla possimus repellendus suscipit tempora tempore vero voluptatem. Mollitia,
    pariatur.
  </div>
  <div>Ab culpa, facere ipsam itaque necessitatibus perspiciatis quis! Beatae consequuntur cum deleniti dicta inventore
    nemo omnis qui sit! Aliquam consequuntur dolore explicabo incidunt libero mollitia nihil quasi sed sit velit!
  </div>
  <div>Accusantium impedit itaque magnam natus perferendis provident, quae quibusdam sit suscipit tenetur veritatis,
    voluptas. Aliquid assumenda cumque, ea id illum ipsa laudantium quas quasi qui quia repellat repudiandae rerum
    voluptatibus!
  </div>
  <div>Animi autem deserunt doloribus error et expedita, laboriosam nemo pariatur perferendis repellat. Alias eligendi
    ipsam labore nostrum odit officia omnis perspiciatis possimus quasi quos repellendus saepe, sint tenetur ullam
    voluptatum!
  </div>
  <div>Beatae magni reiciendis tempore. Expedita magni maxime sequi ut vitae. A animi consequatur consequuntur ducimus
    eos excepturi mollitia nulla quo ut. Aut, commodi consequuntur cumque dolore laborum minus quasi tempora?
  </div>
  <div>At eligendi hic in mollitia nihil quaerat velit vero voluptatibus? Alias aspernatur enim explicabo fuga fugiat
    fugit harum incidunt iure natus numquam optio, recusandae reiciendis saepe sunt temporibus vel voluptatum.
  </div>
  <div>Animi beatae corporis fugiat, iusto laborum molestias nulla officiis omnis placeat possimus quis repudiandae, ut.
    Aliquam debitis doloremque, dolores expedita inventore, nam necessitatibus nostrum perferendis quia quidem saepe ut,
    veritatis!
  </div>
  <div>Aliquam dolore temporibus unde voluptas. Aliquid assumenda at consequuntur doloremque dolores dolorum earum
    eligendi et, in maxime minima molestiae, nam placeat, quam qui quidem recusandae repellat repudiandae tempora
    voluptatem! Accusantium.
  </div>
  <div>Amet atque consectetur dolor dolorem fuga ipsa iste maiores, mollitia necessitatibus non obcaecati provident
    sequi ullam vero voluptatem? Deleniti, fugiat, non! Debitis dolore eligendi molestias odit saepe voluptates?
    Doloremque, quisquam?
  </div>
  <div>Assumenda distinctio dolores fuga labore mollitia placeat rerum sed unde vel. Accusamus deserunt dolorem
    eligendi, ipsam ipsum magni natus odit omnis provident quas quisquam quo quos sapiente sed, similique sint.
  </div>
  <div>Aliquam dicta eius explicabo harum incidunt laboriosam nihil placeat, possimus quae voluptate. Consectetur
    deleniti eaque exercitationem facilis molestias nihil provident, quis tempore vero voluptas. Ducimus eum magnam
    saepe sed velit?
  </div>
  <div>Adipisci aliquam aliquid animi architecto earum, id laudantium magni maxime modi nobis obcaecati officiis placeat
    quae. Animi deserunt dolorem earum fugit incidunt maxime nesciunt nulla quia, sapiente sequi veritatis voluptatibus?
  </div>
  <div>Adipisci amet animi commodi consequatur excepturi illum maiores, omnis reprehenderit temporibus voluptates. Ab,
    amet aperiam cumque dolore enim error est impedit laboriosam modi omnis, quae quo reprehenderit repudiandae sint
    sit.
  </div>
  <div>A aliquid amet architecto assumenda consequuntur, corporis, deleniti explicabo fugit id incidunt minima nobis
    omnis quia quod sapiente sequi sint veniam voluptas! Amet deleniti dolorem facere nesciunt nulla quis quisquam?
  </div>
  <div>Aliquam consequatur, corporis, ducimus eveniet illo itaque laborum minus neque rem reprehenderit tempora, totam
    unde voluptatem? Asperiores, beatae consectetur ducimus eaque et eum exercitationem iure, laudantium maiores natus
    nobis sit.
  </div>
  <div>Ab distinctio excepturi illum ipsam laudantium magnam magni neque nesciunt, nobis sapiente soluta vero
    voluptatem. Autem, doloribus laudantium omnis placeat praesentium quae quam qui quod, sapiente sunt, tenetur ullam
    voluptatibus!
  </div>
  <div>Eveniet, laudantium, veritatis. Assumenda, consectetur eum fugit maxime odio sit ut voluptate! Culpa cum
    cupiditate doloremque dolorum esse est eveniet fuga, laborum laudantium magnam nemo obcaecati quidem repudiandae,
    suscipit voluptate!
  </div>
  <div>A culpa cumque, dicta doloremque dolores eos ex maxime nam nisi, obcaecati, qui quidem reprehenderit voluptate!
    Adipisci dolores eaque exercitationem facere fugiat numquam quis! Autem beatae dolorum mollitia necessitatibus
    repudiandae!
  </div>
  <div>A, aliquid consequuntur dignissimos doloribus error eum facere labore minima, nihil optio perferendis porro quas
    quibusdam quidem quis quo, quod rem repellat sequi soluta sunt unde voluptas voluptatibus. Alias, dolor!
  </div>
  <div>Aliquid eum neque quod repudiandae veniam. A aut, consectetur dolore excepturi ipsa, nam nesciunt omnis quae quia
    suscipit tenetur vel vero voluptatem? Alias eaque fugiat iure laboriosam soluta vero voluptates!
  </div>
  <div>Animi beatae consequatur distinctio dolor dolore ducimus et, fuga hic id illum impedit ipsum iure iusto
    laudantium molestiae molestias nihil numquam officia quam reiciendis rerum similique tenetur voluptatem voluptates,
    voluptatum.
  </div>
  <div>At esse eveniet ex facere illum inventore laborum maxime minus mollitia, necessitatibus nobis quaerat rem sint
    sunt vel velit voluptate? Consectetur ea facere fugit illo labore magni nulla quo voluptatem.
  </div>
  <div>Accusamus accusantium animi architecto asperiores autem cumque, dolor doloribus excepturi exercitationem expedita
    facere facilis laboriosam maxime modi molestias natus neque nisi placeat quam quia quibusdam quisquam suscipit
    tenetur! Adipisci, laboriosam.
  </div>
  <div>Ab accusantium aspernatur dolores eligendi fuga ipsa, ipsam laboriosam mollitia nihil officia ut vel? Accusantium
    aliquam aliquid aperiam consectetur delectus dolorem doloribus fuga inventore, iure mollitia, placeat repellendus
    tempore, tenetur.
  </div>
  <div>Accusamus autem consequatur doloribus ea ipsum minima necessitatibus sint velit? Commodi consectetur error facere
    iusto necessitatibus placeat quidem vero. Dignissimos esse facere fuga ipsa, quis quo repudiandae similique unde
    veniam.
  </div>
  <div>Amet aperiam cupiditate deleniti dolorem ea earum enim eum facere facilis hic id magnam magni mollitia non
    obcaecati perspiciatis quo ratione reprehenderit sapiente soluta, suscipit temporibus ullam voluptas voluptates,
    voluptatibus.
  </div>
  <div>Consequatur, fugit harum illum ipsa nam nihil porro repellendus sit! Dolore earum enim eum expedita harum hic,
    nisi nulla obcaecati pariatur perferendis placeat, praesentium recusandae rerum sint tempora vel, voluptatibus?
  </div>
  <div>Asperiores corporis culpa dolor earum hic, incidunt mollitia officiis rem, sunt, tempore ullam veritatis? At
    cupiditate dicta est excepturi hic, maiores mollitia, nulla quidem quisquam repudiandae sequi soluta sunt ut!
  </div>
  <div>Adipisci alias assumenda dolorum ducimus eos exercitationem expedita facere facilis, impedit incidunt maxime non
    nostrum numquam perspiciatis, quae ratione reiciendis, repellendus repudiandae rerum saepe sunt suscipit unde veniam
    voluptates voluptatibus.
  </div>
  <div>Ad, aperiam aut consequatur dignissimos eos et eveniet harum id laboriosam magni minima molestiae necessitatibus,
    nesciunt nobis nulla obcaecati perferendis perspiciatis porro praesentium quam qui quia quisquam sequi, veniam
    voluptate?
  </div>
  <div>Aliquid assumenda aut consectetur dicta, dolorem ducimus et eum id in ipsa iure modi mollitia natus nulla quam
    quibusdam quidem rem sapiente, sed soluta tempora tempore ut velit veritatis voluptatibus.
  </div>
  <div>Adipisci aliquam, autem commodi consectetur culpa dolor est excepturi harum in ipsam minima nam numquam pariatur
    placeat praesentium similique tempora veritatis vitae? Consectetur exercitationem iste quae quia quo quod, sequi!
  </div>
  <div>Alias aliquam beatae commodi consequatur dicta distinctio, dolorem eveniet explicabo fugit incidunt ipsum magnam
    maxime minus necessitatibus neque, nulla odio pariatur perferendis placeat quo ratione saepe sint suscipit tempore
    voluptatibus.
  </div>
  <div>Aut doloremque facere, iusto modi odit reiciendis temporibus voluptatibus? Alias aliquid atque hic labore
    laboriosam laudantium magnam minus necessitatibus odit sit, ullam, vero? Consectetur cupiditate error, nisi officiis
    omnis tempora!
  </div>
  <div>Amet architecto beatae, corporis error eveniet exercitationem expedita explicabo illo ipsam laudantium, mollitia
    quis repellendus reprehenderit tempore vero voluptas voluptates? Dicta doloribus iusto maiores molestias
    necessitatibus numquam reiciendis sed voluptate!
  </div>
  <div>Aperiam dolore esse fugiat quas qui temporibus? Aliquid atque beatae corporis, expedita explicabo illum itaque
    laudantium nam non sed sequi voluptatem? Hic, maxime minus numquam porro sunt suscipit tenetur veritatis.
  </div>
  <div>Autem delectus dolor dolorem, eaque ex facere illum inventore necessitatibus praesentium repellendus sint
    temporibus tenetur voluptatibus. Autem deleniti dolore eius, id nostrum obcaecati, odio pariatur quod rem temporibus
    unde vero!
  </div>
  <div>Dicta laborum omnis possimus repudiandae voluptatibus. Delectus doloribus id illum maiores possimus. A amet
    aspernatur commodi corporis culpa enim eveniet excepturi iusto magnam, nulla perferendis, possimus quibusdam rem
    sequi sit.
  </div>
  <div>Ad dicta doloribus fuga odit perferendis porro possimus recusandae reiciendis, rem sapiente sunt, suscipit
    temporibus unde? Alias asperiores at, cum dicta expedita fugiat nobis porro quasi quod! Accusantium, magnam sed?
  </div>
  <div>Architecto cupiditate facere ipsa pariatur quam reprehenderit repudiandae tempora? Autem doloremque eligendi
    expedita facere numquam. Esse, id, quod. Deleniti eveniet fugiat incidunt labore magni maxime nobis quod sed, velit
    veniam?
  </div>
  <div>Minus porro possimus quasi! Ad cumque delectus dolores enim excepturi ipsum iusto nisi? Aperiam assumenda
    distinctio dolore eveniet illo, inventore natus nesciunt obcaecati officia officiis quos, rem sed sunt vero.
  </div>
  <div>Amet animi consequatur consequuntur culpa deserunt dolores dolorum, earum enim eveniet facilis laudantium
    molestias nobis nulla odio optio quisquam saepe similique suscipit, totam ullam. Accusantium debitis doloremque eius
    error repellat!
  </div>
  <div>Accusantium aliquid, asperiores assumenda autem corporis cum earum eius esse inventore porro, temporibus totam
    ullam? Ad animi aperiam architecto assumenda dicta ea explicabo facilis fugit illo laborum quaerat, quisquam sit?
  </div>
  <div>Ad aut commodi corporis deleniti deserunt ipsa natus quas sed, sequi veritatis. A amet, aperiam, at cupiditate
    doloribus earum eum minus necessitatibus non possimus quia repudiandae saepe similique? Ipsam, nemo.
  </div>
  <div>Dolorum error eveniet expedita explicabo, iure labore nam odit perferendis qui voluptatibus! Animi at blanditiis
    deleniti distinctio, et magnam maiores minima necessitatibus perferendis possimus qui repellat reprehenderit, saepe
    similique vitae!
  </div>
  <div>Consequatur culpa cum cupiditate eaque eos exercitationem expedita ipsum laboriosam natus nihil numquam obcaecati
    officia optio qui rem unde, vitae? Ab dignissimos excepturi illum numquam obcaecati quaerat quod velit, veniam.
  </div>
  <div>Animi autem, blanditiis eius facilis fugit iste laudantium libero magni molestiae omnis pariatur quasi, quia
    quidem quis quisquam temporibus unde? Aperiam dignissimos et ipsa ipsam mollitia officiis quibusdam repudiandae
    tempore.
  </div>
  <div>Error id magnam mollitia nihil qui. Aperiam atque consectetur corporis doloribus eaque est harum in magni maxime
    non nulla odit officia officiis, quia quod repellendus repudiandae, tempora unde veniam voluptatum.
  </div>
  <div>Accusantium aliquam beatae, culpa dolore dolores ducimus eos est, harum laboriosam minima modi, molestiae nemo
    officia perspiciatis quas quibusdam veritatis. Aliquid amet fuga incidunt maiores odit officia quasi sunt tempore.
  </div>
  <div>Ab ad animi aperiam, consequatur delectus deleniti doloremque et laborum non, numquam placeat qui quibusdam quis
    ratione, repellat similique tempora unde veniam vero voluptas. Autem facilis iure modi quibusdam repudiandae.
  </div>
  <div>Ab amet atque blanditiis cum dolores ea, eveniet ex, facere hic impedit magni optio quae quos soluta sunt
    temporibus voluptates? Delectus dolorum est in omnis provident quisquam sapiente similique totam!
  </div>
  <div>Commodi enim illum nam. Adipisci eaque enim laudantium magnam quaerat quis ratione sed tempora vel voluptates!
    Architecto asperiores dicta error est illum magnam molestias neque provident quidem sequi, suscipit unde!
  </div>
  <div>A aliquam blanditiis deleniti deserunt, eaque eligendi ex exercitationem explicabo facere harum ipsam ipsum
    minima modi molestiae quasi quidem sequi tenetur velit. Doloremque exercitationem, laborum numquam obcaecati quod
    temporibus voluptates.
  </div>
</div>
</body>
</html>
